<template>
  <div>
    <!-- 搜索框复用 -->
    <van-search
      v-model="searchVal"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/SearchPopup')"
    />
    <!-- 分类 -->
    <div class="cate">
      <van-sidebar v-model="activeKey" class="cateclick" @change="showId">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.key"
          :title="item.name"
        />
      </van-sidebar>

      <!-- 右 -->
      <ul class="cateshow">
        <div class="cateimg">
          <img class="cate-img" :src="cateimg_url" alt="" />
          <h5>{{ frontname }}</h5>
        </div>
        <div class="mysite">
          <span></span>
          <h3>{{ catename }}</h3>
        </div>
        <div>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item in subCategoryList"
              :key="item.id"
              :icon=" item.wap_banner_url"
              :text=" item.name"
            />
          </van-grid>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetCatalog, GetCatalogCurrent } from "@/request/api";
export default {
  data() {
    return {
      searchVal: "",
      activeKey: 0, //左侧当前
      categoryList: [], //左侧数据
      currentCategory: [], //当前项
      cateimg_url: "",//图片url
      frontname: "",//标语
      catename: "",//标签
      subCategoryList:[],//子目录数组
      // wap_banner_url:'',//子类目图标路径
      // wap_banner_name:''//子类目名称
    };
  },
  created() {
    GetCatalog().then((res) => {
      console.log(res.data);
      this.categoryList = res.data.categoryList;
      this.cateimg_url = res.data.categoryList[0].img_url;
      this.currentCategory = res.data.currentCategory;
      this.frontname = res.data.categoryList[0].front_name;
      this.catename = res.data.categoryList[0].name;
      this.subCategoryList = res.data.categoryList[0].subCategoryList;
    });
  },
  methods: {
    showId(index) {
      let cateid = this.categoryList[index].id;
      GetCatalogCurrent({
        id: cateid,
      }).then((res) => {
        this.subCategoryList = res.data.currentCategory.subCategoryList;
        this.catename = res.data.currentCategory.name;
        this.frontname = res.data.currentCategory.front_name;
        this.cateimg_url = res.data.currentCategory.img_url;
        // this.wap_banner_url = res.data.subCategoryList[index].wap_banner_url;
        //         this.wap_banner_name = res.data.subCategoryList[index].name;

      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.cate {
  width: 100%;
  background-color: #fff;
  height: 90vh;
  display: flex;
  .cateclick {
    width: 20%;
  }
  .cateshow {
    width: 80%;
    .cateimg {
      position: relative;

      .cate-img {
        width: 95%;
        margin: 0 7px;
        height: 1.4rem;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      h5 {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 48%;
        left: 0%;
        z-index: 222;
        text-align: center;
      }
    }
    .mysite {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      span {
        width: 50%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      h3 {
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #000;
      }
    }
  }
}
</style>